<template>
    <div class="login_page">
        <div class="login_box">
            <div class="img_box"></div>
            <div class="login_msg">
                <el-input placeholder="请输入账号" v-model="account" id="account"> </el-input>
                <el-input placeholder="请输入密码" v-model="password" show-password id="password" > </el-input>
                <el-button type="primary" round @click="login" id="btn">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
      account: '',
      password:'',
    }
  },
  methods:{
    login(){
        if (this.account.length == 0) {
					this.$message({
						message: '账号不能为空!',
						type: 'warning'
					});
					return;
				}
				if (this.password.length == 0) {
					this.$message({
						message: '密码不能为空!',
						type: 'warning'
					});
					return;
				}
				//后端交互
				//后端响应
				this.$router.push({name:'helpPage'},()=>{});
    }
  }
}
</script>

<style>
.login_msg{
    width:400px;
    height:300px;
    margin:auto;
    margin-top:30px;
}
#account,#password{
		width:400px;
		height: 50px;
		margin: 15px;
		margin:15px 0;
		background: rgba(255, 255, 255, 0.65);
		border-radius: 25px;
    }

#btn{
    width:220px;
    margin: auto;
    margin-top:25px;
    border-radius:40px
}
*{
    padding:0px;
    margin:0px;
}

.login_page {
		display: flex;
		height: 100vh;
		align-items: center;
		justify-content: center;
		background-image: url(../assets/bg0.jpg);
		background-size: cover;
	}
    .login_box {
		width: 550px;
		height: 450px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.38);
	}
    .img_box {
		width: 130px;
		height: 130px;
		background-image: url(../assets/touxiang.png);
		background-size: cover;
		border-radius: 50%;
		border: white solid 6px;
		opacity: 0.95;
		margin: auto;
		margin-top: -68px;
    }

</style>
